shellEntry: Hide caps lock warning and use animation to show it

Since the caps-lock warning adds a lot of spacing to dialogs and the
lock screen, hide it by default and only show it when necessary. To make
the transition smooth instead of just showing the label, animate it in
using the height and opacity.

Also add some bottom padding to the label so we can show or hide that
padding, too.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/952

diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss
index 70875b0854fd35a623333639bddbe109638b3763..0a43e86f37db2e1288343c331cc04468dd376754 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -25,9 +25,3 @@ StEntry {
     color: transparentize($fg_color, 0.3);
   }
 }
-
-.caps-lock-warning-label {
-  padding-left: 6.2em;
-  @include fontsize($base_font_size - 1);
-  color: $warning_color;
-}

diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 5d60dbde1667c9fb458fd3e500f08fbf0a5f2087..f05436dc578468499e47de12c7ca66875fd85f52 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -56,4 +56,12 @@
 
 
 // Hidden
-.hidden { color: rgba(0,0,0,0);}
\ No newline at end of file
+.hidden { color: rgba(0,0,0,0);}
+
+// Caps-lock warning
+.caps-lock-warning-label {
+  padding-bottom: 8px;
+  padding-left: 6.2em;
+  @include fontsize($base_font_size - 1);
+  color: $warning_color;
+}

diff --git a/js/ui/shellEntry.js b/js/ui/shellEntry.js
index f8f2f12fd1c6241c6ce92cbcc01175df061e9684..0488d70d09fc708da98368eedaa96c04c50f09a6 100644 (file)
--- a/js/ui/shellEntry.js
+++ b/js/ui/shellEntry.js
@@ -161,31 +161,46 @@ class CapsLockWarning extends St.Label {
 
         this.text = _('Caps lock is on.');
 
+        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+        this.clutter_text.line_wrap = true;
+
         this._keymap = Clutter.get_default_backend().get_keymap();
 
         this.connect('notify::mapped', () => {
             if (this.is_mapped()) {
                 this._stateChangedId = this._keymap.connect('state-changed',
-                    this._updateCapsLockWarningOpacity.bind(this));
+                    () => this._sync(true));
             } else {
                 this._keymap.disconnect(this._stateChangedId);
                 this._stateChangedId = 0;
             }
 
-            this._updateCapsLockWarningOpacity();
+            this._sync(false);
         });
 
         this.connect('destroy', () => {
-            if (this._stateChangedId > 0)
+            if (this._stateChangedId)
                 this._keymap.disconnect(this._stateChangedId);
         });
-
-        this.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
-        this.clutter_text.line_wrap = true;
     }
 
-    _updateCapsLockWarningOpacity() {
+    _sync(animate) {
         let capsLockOn = this._keymap.get_caps_lock_state();
-        this.opacity = capsLockOn ? 255 : 0;
+
+        this.remove_all_transitions();
+
+        this.natural_height_set = false;
+        let [, height] = this.get_preferred_height(-1);
+        this.natural_height_set = true;
+
+        this.ease({
+            height: capsLockOn ? height : 0,
+            opacity: capsLockOn ? 255 : 0,
+            duration: animate ? 200 : 0,
+            onComplete: () => {
+                if (capsLockOn)
+                    this.height = -1;
+            },
+        });
     }
 });